<template>
  <div :style="{padding: '20px'}">
    list列表页面
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.imageName }}</li>
    </ul>
    <div>----------------------</div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.imageName }}</li>
    </ul>
    <NewsItems></NewsItems>
  </div>
</template>

<script>
export default {
  name: 'List',

  async asyncData({ $axios }) {
    // asyncData 适用于页面组件 ，在components组件中是不会执行的，把返回的数据融合组件的数据当中，再进行渲染
    const res = await $axios.get(
      'http://testapi.xuexiluxian.cn/api/slider/getSliders'
    )
    const list = res.data.data.list
    return {
      list,
    }
  },
  data() {
    return {
      list: [],
      items: [],
    }
  },

  head: {
    title: "列表",
  },
  created() {},

  mounted() {},

  methods: {
    //fetch 不适用于pages下页面的请求
    async fetch({ $axios }) {
      const res = await $axios.get('/slider/getSliders')
      const list = res.data.data.list
      this.items = list
    },
  },
}
</script>

<style lang="scss" scoped></style>
